<div ng-init="init()">
  <div class="mb-3">
    <label class="form-label">App Id</label>
    <input type="text" class="form-control" ng-model="socialSettings.app_id" />
  </div>
  <div class="mb-3">
    <label class="form-label">App Secret</label>
    <input
      type="password"
      class="form-control"
      ng-model="socialSettings.app_secret"
    />
  </div>
  <div class="mb-3">
    <label class="form-label">Access Token</label>
    <textarea
      class="form-control"
      ng-model="socialSettings.access_token"
    ></textarea>
  </div>
  <div class="mb-3">
    <label class="form-label">Page Id</label>
    <select
      class="btn btn-secondary form-select"
      ng-options="item.id as item.name for item in socialSettings.pages"
      ng-model="socialSettings.page_id"
    ></select>
    <input type="text" class="form-control" ng-model="socialSettings.page_id" />
  </div>
  <div class="mb-3">
    <a
      class="btn btn-primary text-white"
      ng-if="socialSettings.posts.length>0"
      ng-click="syncPosts()"
      >Sync</a
    >
    <a class="btn btn-primary text-white" ng-click="login()">Login</a>
    <a
      class="btn btn-primary text-white"
      ng-if="socialSettings.page_id"
      ng-click="loadFeeds()"
      >Load Data</a
    >
  </div>
  <table class="table table-hover" cellspacing="0">
    <thead class="thead-light">
      <tr>
        <th scope="col-3" style="width: 25%">Title</th>
        <th scope="col-3" style="width: 25%">Excerpt</th>
        <th scope="col-2" width="10%">Image</th>
        <th scope="col-3" width="10%">Created Date</th>

        <th scope="col-1" style="width: 5%"></th>
      </tr>
    </thead>
    <tbody class="sortable" ng-init="getList()">
      <tr
        ng-repeat="item in socialSettings.posts track by $index"
        class="sortable-item"
        sort-model="post"
        sort-model-id="{{item.id}}"
      >
        <td>
          <input type="text" class="form-control sm" ng-model="item.title" />
        </td>
        <td>
          <textarea class="form-control sm" ng-model="item.Excerpt"></textarea>
        </td>
        <td>
          <preview-image
            img-height="25"
            ng-if="item.image"
            img-src="item.image"
          ></preview-image>
        </td>
        <td>
          <small> {{item.created_time | utcToLocal:'dd.MM.yy hh:mm a'}} </small>
        </td>

        <td>
          <div
            class="btn-group btn-group-sm btn-group-sm float-end"
            role="group"
            aria-label="Actions"
          >
            <a
              href="{{item.permalink_url}}"
              target="_blank"
              class="btn btn-dark"
            >
              <span class="fas fa-eye text-info"></span>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="6">
          <a
            class="btn btn-primary text-white"
            ng-if="socialSettings.prevUrl"
            ng-click="loadFeeds(socialSettings.prevUrl)"
            >Prev</a
          >
          <a
            class="btn btn-primary text-white float-end"
            ng-if="socialSettings.nextUrl"
            ng-click="loadFeeds(socialSettings.nextUrl)"
            >Next</a
          >
        </td>
      </tr>
    </tbody>
  </table>
  <pre>
    {{prettyJsonObj(socialSettings)}}
  </pre>
</div>
